<template>
  <div class="player">
    <div class="left">
      <img class='disc' src="@/assets/img/disc.png" alt="">
      <img class='cover' :src="coverUrl" alt="">
    </div>
    <div class="right">
      <div class="title"><img src="@/assets/img/tag.png" alt=""><span>{{ songName }}</span> </div>
      <div class="singer">歌手: <span>{{ singerName }}</span></div>
      <div class="album">所属专辑: <span>{{ albumName }}</span></div>
      <audio class='audio' controls autoplay :src="musicUrl"></audio>
      <ul class='lyric-container'>
        <li class='lyric' v-for="(item,index) in lyric" :key="'lrc'+ index">{{ item }}</li>
        <li class='lyric'>初次见你</li>
        <li class='lyric'>那双迷人的小眼睛</li>
      </ul>
    </div>
  </div>
</template>

<script>
import onesongurl from '../mockdatas/oneSongUrl';
import onesonglrc from '../mockdatas/oneSongLrc';
import onesongbum from '../mockdatas/oneSongBum';
export default {
  data(){
    return{
      //歌曲地址
      musicUrl:'',
      //歌手名
      singerName:'',
      //封面
      coverUrl:'',
      //专辑名
      albumName:'',
      //歌名
      songName:'',
      //歌词
      lyric:[]
    }
  },
  created(){
    this.getMusicUrl()
    this.getMusicLrc()
    this.getMusicInfo()

  },
  methods:{
    //获取歌曲URL
    async getMusicUrl(){
      await this.$axios
        .get('/song/url?ids='+this.$route.params.id)
        .then(res => {
          this.musicUrl = res.data.data[0].url
        })
        .catch(err => {
          console.log("请求错误");
          this.musicUrl = onesongurl
        })
        console.log(this.musicUrl);
    },
    //获取歌曲信息
    async getMusicInfo(){
      await this.$axios
        .get('/song/detail?ids='+this.$route.params.id)
        .then(res => {
          this.singerName = res.data.songs[0].ar[0].name
          this.coverUrl = res.data.songs[0].al.picUrl
          this.albumName = res.data.songs[0].al.name
          this.songName = res.data.songs[0].name
        })
        .catch(err => {
          console.log("请求错误");
          this.singerName = onesongbum.ar[0].name
          this.coverUrl = onesongbum.al.picUrl
          this.albumName = onesongbum.al.name
          this.songName = onesongbum.name
        })
        console.log(this.singerName,this.coverUrl,this.albumName,this.songName);
    },
    //获取歌词信息
    async getMusicLrc(){
      await this.$axios
        .get('/lyric?id='+ this.$route.params.id)
        .then(res => {
          console.log(res)
          // 保存歌词为数组
          this.lyric = res.data.lrc.lyric.split('\n');
          // 循环数组
          for (let i = 0; i < this.lyric.length; i++) {
            this.lyric[i] = this.lyric[i].slice(11);
          }
        })
        .catch(err => {
          console.log("请求错误");
          this.lyric = onesonglrc
          // 循环数组 切掉 [00:00.000]
          for (let i = 0; i < this.lyric.length; i++) {
            this.lyric[i] = this.lyric[i].slice(11);
          }
        })
        console.log(onesonglrc);
    }
  }
  
}
</script>

<style scoped>
@import "@/assets/css/player.css";
</style>